import 'package:auto_route/auto_route.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_news/common/utils/utils.dart';
import 'package:flutter_news/common/values/values.dart';
import 'package:flutter_news/common/widgets/widgets.dart';

/// 注册页面
@RoutePage()
class SignUpPage extends StatefulWidget {
  const SignUpPage({Key? key}) : super(key: key);

  @override
  State<SignUpPage> createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {
  // fullName email password 的控制器
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: transparentAppBar(
          context: context,
          title: Text(""),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: AppColors.primaryText,
            ),
            onPressed: () {
              // Navigator.pop(context);
              context.router.back();
            },
          ),
          actions: [
            IconButton(
              icon: const Icon(
                Icons.info_outline,
                color: AppColors.primaryText,
              ),
              onPressed: () {
                showToast(msg: '这是注册界面');
              },
            )
          ]),
      body: Center(
        child: Column(
          children: [
            Divider(height: duSetHeight(1)),
            SizedBox(
              height: duSetHeight(50),
            ),
            _buildLogo(),
            _buildInputForm(),
            const Spacer(),
            _buildThirdPartyLoginTitle(),
            SizedBox(
              height: duSetHeight(20),
            ),
            _buildThirdPartyLoginBtn(),
            SizedBox(
              height: duSetHeight(40),
            ),
            _buildHaveAccountButton(),
            SizedBox(
              height: duSetHeight(20),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建 logo
  Widget _buildLogo() {
    return Text(
      "Sign up",
      textAlign: TextAlign.center,
      textScaleFactor: 1.0,
      style: TextStyle(
        color: AppColors.primaryText,
        fontFamily: "Montserrat",
        fontWeight: FontWeight.w600,
        fontSize: duSetFontSize(24),
        height: 1,
      ),
    );
  }

  /// 构建表单
  Widget _buildInputForm() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: duSetHeight(49),
        ),
        inputTextEdit(
          controller: _fullNameController,
          hintText: "Full name",
          keyboardType: TextInputType.text,
          maxLen: 5,
        ),
        SizedBox(
          height: duSetHeight(15),
        ),
        inputTextEdit(
          controller: _emailController,
          hintText: "Email",
          keyboardType: TextInputType.emailAddress,
          maxLen: 40,
        ),
        SizedBox(
          height: duSetHeight(15),
        ),
        inputTextEdit(
          controller: _pwdController,
          hintText: "Password",
          keyboardType: TextInputType.visiblePassword,
          isPassword: true,
          maxLen: 20,
        ),
        SizedBox(
          height: duSetHeight(15),
        ),
        SizedBox(
          width: duSetWidth(295),
          child: btnFlatButtonWidget(
            onPressed: () {
              if (!duCheckStringLength(_fullNameController.value.text, 5)) {
                showToast(msg: '用户名不能小于5位');
                return;
              }
              if (!duIsEmail(_emailController.value.text)) {
                showToast(msg: "请正确输入邮件");
                return;
              }
              if (!duCheckStringLength(_pwdController.value.text, 6)) {
                showToast(msg: "密码不能小于6位");
                return;
              }
              // Navigator.pop(context);
              context.router.back();
            },
            btnText: "Create an account",
            bgColor: AppColors.primaryElement,
          ),
        ),
        Container(
          width: duSetWidth(295),
          margin: EdgeInsets.only(top: duSetHeight(15)),
          // By signing up you agree to our Teams and Conditions of Use
          // 将文本进行分段显示，可以使用 Text.rich(textSpan)，也可以使用 RichText
          child: RichText(
            textDirection: TextDirection.ltr,
            textScaleFactor: 1.0,
            textAlign: TextAlign.center,
            text: TextSpan(
              text: "By signing up you agree to our ",
              style: TextStyle(
                color: AppColors.primaryText,
                fontFamily: "Avenir",
                fontWeight: FontWeight.w400,
                fontSize: duSetFontSize(18),
              ),
              children: [
                TextSpan(
                  text: "Teams",
                  style: const TextStyle(
                    color: AppColors.secondaryElementText,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 设置点击事件
                      showToast(msg: "Teams");
                    },
                ),
                const TextSpan(
                  text: " and ",
                ),
                TextSpan(
                  text: "Conditions of Use",
                  style: const TextStyle(
                    color: AppColors.secondaryElementText,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 设置点击事件
                      showToast(msg: "Conditions of Use");
                    },
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  /// 第三方登录标题
  Widget _buildThirdPartyLoginTitle() {
    return Text(
      "Or sign in with social networks",
      textScaleFactor: 1.0,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: AppColors.primaryText,
        fontFamily: FontFamily.avenir,
        fontWeight: FontWeight.w400,
        fontSize: duSetFontSize(16),
        height: 1.0,
      ),
    );
  }

  /// 第三方登录按钮
  Widget _buildThirdPartyLoginBtn() {
    return SizedBox(
      width: duSetWidth(295),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          btnFlatButtonBorderOnlyWidget(
            onPressed: () {},
            iconFileName: ImageNameUtil.iconsTwitter,
          ),
          const Spacer(),
          btnFlatButtonBorderOnlyWidget(
            onPressed: () {},
            iconFileName: ImageNameUtil.iconsGoogle,
          ),
          const Spacer(),
          btnFlatButtonBorderOnlyWidget(
            onPressed: () {},
            iconFileName: ImageNameUtil.iconsFacebook,
          ),
        ],
      ),
    );
  }

  /// 有账号
  Widget _buildHaveAccountButton() {
    return btnFlatButtonWidget(
      onPressed: () {
        // Navigator.pop(context);
        context.router.back();
      },
      btnText: "I have an account",
      bgColor: AppColors.secondaryElement,
      width: 294,
      fontColor: AppColors.primaryText,
      fontWeight: FontWeight.w500,
      fontSize: 16,
    );
  }
}
